<template>
	<div class="aid">
		<div class="base">
			<p class="fixed-top">
				{{ JSON.stringify(text) == '{}' ? '添加活动申请表单' : '修改活动申请表单' }}
				<a-icon @click="closeFunction" type="close" />
			</p>
			<div class="main" id="new_message">
				<a-form-model ref="ruleForm" :model="form" :rules="rules">
					<a-form-model-item label="表单类型" prop="Type">
						<a-select optionFilterProp="children" showSearch v-model="form.Type">
							<template v-for="(item, index) in ActivityApplyFormTypeList">
								<a-select-option :key="item.Key" v-if="index<2">{{ item.Value }}</a-select-option>
							</template>
						</a-select>
					</a-form-model-item>
					<a-form-model-item label="名称" prop="Name"><a-input v-model="form.Name" /></a-form-model-item>
					<a-form-model-item label="字段类型" prop="FieldType">
						<a-select optionFilterProp="children" showSearch v-model="form.FieldType">
							<template v-for="(item, index) in FieldTypeList">
								<a-select-option :key="item.Key">{{ item.Value }}</a-select-option>
							</template>
						</a-select>
					</a-form-model-item>
					<a-form-model-item label="是否前台显示" prop="IsShow">
						<a-radio-group name="radioGroup" v-model="form.IsShow">
							<a-radio :value="true">显示</a-radio>
							<a-radio :value="false">不显示</a-radio>
						</a-radio-group>
					</a-form-model-item>
					<a-form-model-item label="是否必填" prop="IsMust">
						<a-radio-group name="radioGroup" v-model="form.IsMust">
							<a-radio :value="true">必填</a-radio>
							<a-radio :value="false">非必填</a-radio>
						</a-radio-group>
					</a-form-model-item>
					<a-form-model-item :label="label" prop="Regular"><a-input :placeholder="placeholder" v-model="form.Regular" /></a-form-model-item>
					<a-form-model-item label="验证失败提示"><a-input v-model="form.ErroeMsg" /></a-form-model-item>
					<a-form-model-item label="" class="fixed-bottom">
						<a-button type="primary" @click="handleSubmit">{{ JSON.stringify(text) == '{}' ? '确认添加' : '确认修改' }}</a-button>
						<a-button style="margin-left: 10px;" @click="closeFunction">取消</a-button>
					</a-form-model-item>
				</a-form-model>
			</div>
		</div>
	</div>
</template>

<script>
import { AddApplyActivityForm, UpdateApplyActivityForm } from '@/api/follow';
export default {
	props: {
		text: Object,
		FieldTypeList: Array,
		ActivityApplyFormTypeList: Array
	},
	watch: {
		text: function(text) {
			if (JSON.stringify(text) == '{}') {
			} else {
				this.form = text;
			}
		},
		form: {
			handler(newName, oldName) {
				if(newName.FieldType==9){
					this.label = '选择项'
					this.placeholder = "多个选择项之间请用','隔开"
					this.rules.Regular[0].required = true
				}else{
					this.label = '正则验证'
					this.placeholder = "请输入正则校验"
					this.rules.Regular[0].required = false
					// 测试1,测试2,测试3
				}
			},
			immediate: true,
			deep: true
		}
	},
	data() {
		return {
			formLayout: 'horizontal',
			form: this.$form.createForm(this, {
				name: 'coordinated'
			}),
			label: '正则验证',
			placeholder:'请输入正则校验',
			DepartmenDropdowntList: [],
			form: {
				Type: '',
				Name: '',
				FieldType: '',
				IsMust: '',
				Regular: '',
				ErroeMsg: '',
				IsShow: ''
			},
			rules: {
				Type: [
					{
						required: true,
						message: '请选择表单类型',
						trigger: 'change'
					}
				],
				Name: [
					{
						required: true,
						message: '请输入表单名称',
						trigger: 'change'
					},
					{
						validator: (rule, val, callback) => {
							var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]");
							if (pattern.test(val)) {
								callback('不可输入特殊字符');
							} else {
								callback();
							}
							callback();
						}
					}
				],
				FieldType: [
					{
						required: true,
						message: '请选择字段类型',
						trigger: 'change'
					}
				],
				IsMust: [
					{
						required: true,
						message: '请选择是否必填',
						trigger: 'change'
					}
				],
				IsShow: [
					{
						required: true,
						message: '请选择是否前台显示',
						trigger: 'change'
					}
				],
				Regular: [
					{
						required: false,
						message: '请输入选择项',
						trigger: 'change'
					}
				]
			}
		};
	},
	created() {},
	methods: {
		filterOption(input, option) {
			return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
		},
		closeFunction(data) {
			this.$emit('closeFun', data);
			this.form = {
				Type: '',
				Name: '',
				FieldType: '',
				IsMust: '',
				Regular: '',
				ErroeMsg: '',
				IsShow: ''
			};
			this.$refs['ruleForm'].clearValidate();
			// this.gradeYear = null;
			// this.fileList = [];
			// this.form = {};
		},
		handleSubmit(e) {
			this.$refs.ruleForm.validate(async valid => {
				if (valid) {
					let data = this.form;
					let res = {};
					if (JSON.stringify(this.text) == '{}') {
						res = await AddApplyActivityForm(data);
					} else {
						res = await UpdateApplyActivityForm(data);
					}
					if (res.data.code === 0) {
						this.$message.success(res.data.msg);
						this.closeFunction('1');
					} else {
						this.$message.error(res.data.msg);
					}
				} else {
					return false;
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
/deep/.ant-form-item {
	margin: 20px 50px;
}
/deep/.ant-form-item-label {
	width: 120px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: right;
}
/deep/.ant-form-item-control-wrapper {
	flex: 1;
}

.ant-form-item {
	margin-bottom: 10px;
}

/deep/.ant-form {
	margin-top: 50px;
	padding-bottom: 50px;
}
</style>
